import { observer } from 'mobx-react-lite'
import TodoCompleted from './TodoCompleted'
import TodoDelete from './TodoDelete'
function Todo ({ todo }) {
  return (
    <li className={todo.isCompleted ? 'completed' : ''}>
      <div className='view'>
        <TodoCompleted todo={todo} />
        <label>{todo.title}</label>
        <TodoDelete id={todo.id} />
      </div>
      <input className='edit' />
    </li>
  )
}

export default observer(Todo)
